<template>
	<div>
		<HomeHeader
			:tabs="tabs"
			@handeleItemTab="handeleItemTab"
		>
			<block v-if="tabs[0].isActive">
				<div class="myPage">
					<div class="myInfo">
						<div class="top">
							<div class="auth">
								<img src="https://ae01.alicdn.com/kf/Haa283395ddfc432f82294e98187ea8d6L.png">
							</div>
							<div class="info">
								<div class="user">请登录</div>
								<div class="status">验证通过</div>
							</div>
							<div class="tabLook">
								<div>我的成长</div>
								<div>查看等级</div>
							</div>
						</div>
						<div class="bottom">
							<div>
								<p>100</p>
								<p>我的积分</p>
							</div>
							<div>
								<p>5.0</p>
								<p>星级评价</p>
							</div>
							<div>
								<p>0%</p>
								<p>成交率</p>
							</div>
						</div>
					</div>
					<div class="OptionList">
						<div class="item" v-for="item in optionList" :key="item.id">
							<span>{{item.value}}</span>
							<span>➤</span>
						</div>
					</div>
				</div>
			</block>
			<block v-else-if="tabs[1].isActive">
				<div class="mypage">
					<div class="IndexInfo">
						<div class="dataView">
							<div>
								<p>0</p>
								<p>今日接单</p>
							</div>
							<div>
								<p>0</p>
								<p>今日流水</p>
							</div>
							<div>
								<p>0小时0分</p>
								<p>在线时长</p>
							</div>
							<div @click="handleModelChange('temperature')">
								<p>点此上报</p>
								<p>今日体温</p>
							</div>
						</div>
						<div class="optionBlock">
							<div class="scan">
								<p class="icon">
									<img class="icon_class" src="https://ae01.alicdn.com/kf/H27f215f7ff1948d69f5738088ad98fefF.png" >
								</p>
								<p class="text-div">扫码验证</p>
							</div>
							<div class="math" @click="handleModelChange('rand')">
								<p class="icon">
									<img class="icon_class" src="https://ae01.alicdn.com/kf/Hcb32cdee37ae461ab3d6d24dfd6b6ec1r.png" >
								</p>
								<p class="text-div">随机码确认</p>
							</div>
							<div class="task">
								<p class="icon">
									<img class="icon_class" src="https://ae01.alicdn.com/kf/H15b9cc60c611423bac6f15e4982a0fc7T.png" >
								</p>
								<p class="text-div">任务区</p>
							</div>
							<div class="order">
								<p class="icon">
									<img class="icon_class" src="https://ae01.alicdn.com/kf/H538914407fcc427bba1024adff49534fl.png" >
								</p>
								<p class="text-div">我的订单</p>
							</div>
							<div class="health">
								<p class="icon">
									<img class="icon_class" src="https://ae01.alicdn.com/kf/H15aed5f413f247028759a612da056cebI.png" >
								</p>
								<p class="text-div">健康码</p>
							</div>
						</div>
					</div>
					<div>当前无可领取订单</div>
				</div>
			</block>
			<block v-else>
				<div class="findPanel">
					<div class="iconBox" v-for="item in findIconList" :key="item.id">
						<div class="icon-img">
							<img class="icon-img-content" :src="item.url" />
						</div>
						<p class="icon-desc">{{item.text}}</p>
					</div>
				</div>
			</block>
		</HomeHeader>
		<HomeFooter></HomeFooter>
		<!-- 模态框 -->
		<div class="modelBlock" :class="{hide:isnone}">
			<div class="model" @click="handleModelChange(-1)"></div>
			<div class="content">
				<p class="title">{{text}}</p>
				<p class="inp">
					<input v-model="message" style="height:96rpx;font-size:48rpx;" type="text">
				</p>
				<p class="btn" @click="handleModelChange(1)">确定</p>
			</div>
		</div>
	</div>
</template>

<script>
	import HomeHeader from '../components/Header'
	import HomeFooter from '../components/Footer'
	export default {
		components:{
			HomeHeader,
			HomeFooter
		},
		data() {
			return {
				message:'',
				isnone:true,
				text:'',
				tabs:[
					{
						id:0,
						value:"我的",
						isActive:false
					},
					{
						id:1,
						value:"首页",
						isActive:true
					},
					{
						id:2,
						value:"发现",
						isActive:false
					},
				],
				optionList:[
					{
						id:0,
						value:"我的行程"
					},
					{
						id:1,
						value:"我的钱包"
					},
					{
						id:2,
						value:"消息中心"
					},
					{
						id:3,
						value:"我的车辆"
					},
					{
						id:4,
						value:"奖励活动"
					},
					{
						id:5,
						value:"推荐有礼"
					},
					{
						id:6,
						value:"退出"
					}
				],
				findIconList:[
					{
						id:0,
						text:"网点查询",
						url:"https://ae01.alicdn.com/kf/Hf7485e38974645ff820b448341ac9372W.png"
					},
					{
						id:1,
						text:"沪能车援",
						url:"https://ae01.alicdn.com/kf/H92580e7f65244cdfa2be74a15e0c6668m.png"
					},
					{
						id:2,
						text:"缴纳车管理费",
						url:"https://ae01.alicdn.com/kf/H6bb0595fdd0c4369894d461190947a96u.png"
					},
					{
						id:3,
						text:"领券中心",
						url:"https://ae01.alicdn.com/kf/H1c333654648d46248256a56d79bb4ddbS.png"
					},
					{
						id:4,
						text:"我的客服",
						url:"https://ae01.alicdn.com/kf/H816e7ac08f0341539527ad48074d8d21F.png"
					},
					{
						id:5,
						text:"充电桩",
						url:"https://ae01.alicdn.com/kf/He79c8cee61044e0da22db98e85457f2cf.png"
					},
					{
						id:6,
						text:"购新能源车",
						url:"https://ae01.alicdn.com/kf/H1c333654648d46248256a56d79bb4ddbS.png"
					},
					{
						id:7,
						text:"人人销售",
						url:"https://ae01.alicdn.com/kf/H5aec7eae3a964d69aba5f31cc9e5ecd0Y.png"
					}
				]
			}
		},
		methods: {
			handleModelChange(i){
				let a = i;
				if(a==='temperature'){
					this.text = "体温"
					this.isnone = !this.isnone;
				}else if(a==='rand'){
					this.text = "随机码确认"
					this.isnone = !this.isnone;
				}else{
					console.log(this.message);
					this.message = "";
					this.isnone = !this.isnone;
				}
			},
			handeleItemTab(i){
				// 获取被点击标题的索引
				const index = i;
				// 修改原数组
				let tabs = this.tabs;
				// 遍历tabs项
				tabs.forEach((v,i)=>{
					i === index ? v.isActive = true : v.isActive = false;
				});
				// 在将tabs的值放回tabs中
				this.tabs = tabs;
				// console.log(this.tabs);
			}
		}
	}
</script>

<style scoped>
	.myPage{
		display:flex;
		flex-direction:column;
		flex:1;
		background:rgb(236,236,236);
		padding-bottom:80rpx;
	}
	.myInfo,.IndexInfo{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		align-items:space-between;
		padding-bottom:30rpx;
		background:rgb(147,191,159);
		margin-bottom:30rpx;
	}
	.top{
		display:flex;
		justify-content:space-between;
		/* flex:1; */
		padding:20rpx 0 20rpx 20rpx;
	}
	.auth{
		width:116rpx;
		height:116rpx;
		border-radius:50%;
	}
	.info{
		display:flex;
		flex:2;
		flex-direction:column;
		margin-left:30rpx;
	}
	.info .user{
		color:#000;
		height:50rpx;
		line-height:50rpx;
		font-weight:bold;
		font-size:34rpx;
	}
	.info .status{
		border:2rpx solid #999999;
		color:#999;
		width:70%;
		height:48rpx;
		line-height:48rpx;
		text-align:center;
		border-radius:30rpx;
		font-size:28rpx
	}
	.tabLook{
		display:flex;
		width:150rpx;
		flex-direction:column;
		justify-content:space-between;
		align-items:space-between;
		border-top-left-radius:80rpx;
		border-bottom-left-radius:80rpx;
		text-align:right;
		background:rgb(140,168,148);
		font-size:28rpx;
	}
	.tabLook div:first-child{
		margin-top:20rpx;
		color:#fff;
	}
	.tabLook div:last-child{
		margin-bottom:20rpx;
		color:#fff;
	}
	.bottom{
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin-top:30rpx;
	}
	.bottom div{
		flex:3;
		text-align:center;
		color:#fff;
		font-size:28rpx;
	}
	img{
		width:100%;
	}
	.OptionList .item{
		display:flex;
		flex:1;
		justify-content:space-between;
		background:#fff;
		padding:0 15rpx;
		line-height:80rpx;
		font-size:32rpx;
	}
	.OptionList .item:nth-child(5){
		margin-top:30rpx;
	}
	.OptionList .item:last-child{
		margin-top:30rpx;
	}
	/* 首页样式 */
	.dataView,.optionBlock{
		margin-top:30rpx;
		display:flex;
		justify-content:space-between;
	}
	.dataView div{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:space-between;
		flex:2;
		text-align:center;
		padding:0 20rpx;
	}
	.dataView div p{
		color:#fff;
		font-size:28rpx;
		margin-top:20rpx;
	}
	.optionBlock div{
		flex:1;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		align-items:space-between;
	}
	.optionBlock div p{
		display:flex;
		justify-content:center;
		font-size:28rpx;
		margin:20rpx 0;
	}
	.optionBlock .icon_class{
		width:30%;
		height:30%;
	}
	/* 模态框 */
	.modelBlock{
		width:100%;
		height:100%;
		position:fixed;
		top:0;
		left:0;
		z-index:1;
	}
	.model{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		position:relative;
		top:0;
		left:0;
		z-index:2;
	}
	.modelBlock .content{
		width:90%;
		height:400rpx;
		background:#fff;
		margin-top:300rpx;
		position:absolute;
		top:0;
		left:5%;
		z-index:3;
	}
	.modelBlock .content p.title{
		text-align:center;
		font-size:48rpx;
		line-height:96rpx;
		border-bottom:1px solid #ccc;
		font-weight:600;
	}
	.modelBlock .content p.inp{
		text-align:center;
		font-size:48rpx;
		height:96rpx;
		line-height:96rpx;
		border-bottom:1px solid #ccc;
		font-weight:600;
	}
	.modelBlock .content p.btn{
		text-align:center;
		font-size:48rpx;
		height:96rpx;
		line-height:96rpx;
		font-weight:600;
	}
	.hide{
		display:none;
	}
	/* 发现面板 */
	.findPanel{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
	}
	.iconBox{
		display:flex;
		flex-direction:column;
		width:25%;
		height:200rpx;
	}
	.icon-img{
		display:flex;
		justify-content:center;
		margin-top:40rpx;
	}
	.icon-img-content{
		width:25%;
		height:100%;
	}
	.icon-desc{
		margin-top:40rpx;
		text-align:center;
		line-height:60rpx;
		font-size:28rpx;
	}
</style>
